<template>
	<view class="box">
		<f-navbar>
			<view slot="left">
				<auth :statue="statue" :userInfo="userInfo" />
			</view>
		</f-navbar>
		<view style="background-color: #FFF;padding-bottom: 10rpx;" class="u-border-bottom">
			<view class="p-20">
				<u-search placeholder="输入商品" v-model="params.keyword" shape="round" :showAction="false"
					@search="search">
				</u-search>
			</view>
			<u-tabs :list="tabList" @click="changTab" lineColor="#007DF7" :activeStyle="{'color':'#007DF7'}"
				:current="current" sticky></u-tabs>
		</view>
		<view style="background-color: #FFF;padding: 20rpx;" class="u-flex u-row-between" v-if="statue==2">
			<text style="color:#666666;font-size: 26rpx;">共<text style="color: #007DF7;">{{total}}</text>个商品</text>
			<view class="u-flex u-row-left">
				<u-icon name="edit-pen" size="28rpx" color="#007DF7" />
				<text style="margin-left: 10rpx; color: #007DF7;font-size: 26rpx;"
					@tap="batch()">{{!select?'批量操作':'取消'}}</text>
			</view>
		</view>
		<empty v-if="statue!=2" :type="statue" style="margin-top: 150rpx;" />

		<view v-else class="p-20">
			<u-checkbox-group v-model="checked" @change="change">
				<view class="">
					<view v-for="(item,index) in list" :key="index" class="p-20 m-b-20"
						style="background-color: #FFF;border-radius: 20rpx;">
						<view class="u-flex u-row-between" @click="goNav(`/pages/product/detail?id=${item.productId}`)">
							<u-checkbox :name="item.id" v-if="select" :customStyle="{marginBottom: '8px'}" shape="circle">
							</u-checkbox>
							<view class="u-flex u-row-left" style="align-items: flex-start;">
								<image :src="item.cover" style="width: 112rpx;height: 112rpx;border-radius: 8rpx;" />
								<view class="m-l-20" :class="{'w':!select,'ws':select}">
									<view style="color: #333333;font-size: 24rpx;line-height: 36rpx;height: 80rpx;"
										class="u-line-2">
										{{item.title}}
									</view>
									<view class="u-flex u-row-between">
										<text style="color: #FF0E29;font-size: 32rpx;">￥{{item.price}}</text>
										<text style="color:#999999;font-size: 22rpx;">
											库存：{{item.productStock}} | 销量：{{item.sales}}
										</text>
									</view>
								</view>
							</view>
						</view>
						<view style="margin: 20rpx 0;" v-if="!select"><u-line height="100%" /></view>
						<view class="u-flex u-row-between" v-if="!select">
							<text style="color:#999999;font-size: 24rpx;">同步时间：{{item.changeTime}}</text>
							<view class="u-flex u-row-right">
								<u-button v-if="item.statue==0 || item.statue==3" size="mini"
									:customStyle="{background:'#007DF7',color:'#FFF',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx',width:'120rpx'}"
									@tap="up(item.id)">上架</u-button>
								<u-button v-if="item.statue==1" size="mini"
									:customStyle="{background:'#007DF7',color:'#FFF',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx',width:'120rpx'}"
									@tap="cancel(item.id)">取消</u-button>
								<u-button v-if="item.statue==2" size="mini"
									:customStyle="{background:'#007DF7',color:'#FFF',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx',width:'120rpx'}"
									@tap="down(item.id)">下架</u-button>
								<u-button v-if="item.statue==3" size="mini" class="m-l-20"
									:customStyle="{border:'solid 1rpx #007DF7',color:'#007DF7',fontSize:'24rpx',height:'56rpx',width:'150rpx', lineHeight:'56rpx',borderRadius:'8rpx'}"
									@tap="toast({msg:item.failMsg,type:'error'})">查看原因</u-button>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="footer u-flex u-row-between" v-if="select">
			<view class="m-l-20 u-flex u-row-left">
				<u-checkbox-group placement="column" @change="checkboxChange" v-model="all">
					<u-checkbox activeColor="#007DF7" :customStyle="{height: '113rpx'}" label="全选" name="all"
						shape="circle" labelSize="28rpx">
					</u-checkbox>
				</u-checkbox-group>

			</view>


			<view style="margin-right: 10rpx;">
				<u-button @tap="batchUp()" v-if="params.statue==0 || params.statue==3" :disabled="checked.length==0"
					:customStyle="{backgroundColor:'#007DF7',color:'#FFFFFF',width:'250rpx',height:'69rpx',fontWeight:'660',borderRadius:'10rpx',border:'none'}">
					批量上架<text style="margin-left: 20rpx;" v-show="checked.length>0">({{checked.length}})</text>
				</u-button>
				<u-button @tap="batchCancel()" v-if="params.statue==1" :disabled="checked.length==0"
					:customStyle="{backgroundColor:'#007DF7',color:'#FFFFFF',width:'250rpx',height:'69rpx',fontWeight:'660',borderRadius:'10rpx',border:'none'}">
					批量取消<text style="margin-left: 20rpx;" v-show="checked.length>0">({{checked.length}})</text>
				</u-button>

				<u-button @tap="batchDown()" v-if="params.statue==2" :disabled="checked.length==0"
					:customStyle="{backgroundColor:'#007DF7',color:'#FFFFFF',width:'250rpx',height:'69rpx',fontWeight:'660',borderRadius:'10rpx',border:'none'}">
					批量下架<text style="margin-left: 20rpx;" v-show="checked.length>0">({{checked.length}})</text>
				</u-button>
			</view>
		</view>
		<toast :show="showToast" @change="showToast=false" :data="toastData" />
	</view>

</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import empty from '@/components/empty.vue'
	import toast from '@/components/toast.vue'
	import auth from '@/components/auth.vue'
	import {
		goNav
	} from '@/lib/Comment.js'
	import {
		getProductList,
		setProductUp,
		setProductDown,
		setProductCancel,
		setProductBatchUp,
		setProductBatchDown,
		setProductBatchCancel
	} from '@/api/shopAuth.js'
	export default {
		components: {
			navbar,
			empty,
			toast,
			auth
		},
		data() {
			return {
				config:{
					backgroundColor:'#fff'
				},
				toastData: {},
				showToast: false,
				all: [],
				checked: [],
				select: false,
				total: 0,
				userInfo: {},
				statue: 0,
				params: {
					keyword: '',
					page: 1,
					limit: 20,
					statue: 0
				},
				current: 0,
				tabList: [{
						name: '未上架',
						statue: 0,


					}, {
						name: '审核中',
						statue: 1,

					}, {
						name: '已上架',
						statue: 2,
					}, {
						name: '未通过',
						statue: 3,
					},

				],
				list: [],
				loading: false,
				loadend: false,

			}
		},
		onLoad() {


		},
		onShow() {
			let that = this
			this.getUserInfo((statue) => {
				that.statue = statue
				this.getList()
			})
		},
		computed: {

		},

		methods: {
			goNav(url){
				goNav(url)
			},
			toast(v) {
				this.toastData = v
				this.showToast = true
			},
			down(id) {
				setProductDown({
					id: id
				}).then(res => {
					this.resetList()
				})
			},
			up(id) {
				setProductUp({
					id: id
				}).then(res => {
					this.resetList()
					this.toast({
						type: 'success',
						msg: '上架申请已提交',
						subMsg: '预计一小时内进行审核，可稍后查询结果'
					})
				})
			},
			cancel(id) {
				setProductCancel({
					id: id
				}).then(res => {
					this.resetList()
				})
			},
			batchDown() {
				setProductBatchDown({
					id: this.checked
				}).then(res => {
					this.resetList()
				})
			},
			batchUp() {
				setProductBatchUp({
					id: this.checked
				}).then(res => {
					this.resetList()
					this.toast({
						type: 'success',
						msg: '上架申请已提交',
						subMsg: '预计一小时内进行审核，可稍后查询结果'
					})
				})
			},
			batchCancel() {
				setProductBatchCancel({
					id: this.checked
				}).then(res => {
					this.resetList()
				})
			},
			resetList() {
				this.select = false
				this.checked = []
				this.list = []
				this.all = []
				this.params.page = 1
				this.loadend = false
				this.loading = false
				this.getList()
			},
			checkboxChange(e) {
				if (e.length > 0) {
					let d = []
					this.list.forEach(item => {
						d.push(item.id)
					})
					this.$set(this, 'checked', d)
				} else {
					this.$set(this, 'checked', [])
				}
			},
			change(e) {
				if (e.length == this.list.length && this.all.length == 0) {
					this.all = ['all']
				} else if (this.all.length > 0 && e.length < this.list.length) {
					this.all = []
				}
			},
			batch() {
				console.log('>>>', this.checked)
				this.checked = []
				this.select = !this.select
			},
			getList() {
				if (this.loadend || this.loading || this.statue != 2)
					return
				this.loading = true
				getProductList(this.params).then(res => {
					this.total = res.data.total
					this.params.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true

				}).catch(err => {
					this.loading = false
					this.loadend = true

				})
			},
			changTab(value) {
				this.select = false
				this.checked = []
				this.all = []
				this.params.statue = value.statue
				this.list = []
				this.params.page = 1
				this.loadend = false
				this.loading = false
				this.getList()
			},
			getUserInfo(callback) {

				let statue = this.$store.getters.isLogin ? 1 : 0;
				if (statue == 1) {
					let that = this
					this.$store.dispatch("USERINFO", true).then((res) => {
						that.userInfo = res
						callback(res.isAuth == 1 ? 2 : 1)
					});
				} else {
					callback(statue)
				}


			},
			search(value) {
				this.params.keyword = value
				this.resetList()
			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f6f6f6;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.text1 {
		color: #333333;
		font-size: 28rpx;
	}

	.w {
		width: 540rpx;
	}

	.ws {
		width: 500rpx;
	}

	.footer {
		position: fixed;
		position: fixed;
		bottom: var(--window-bottom, 0);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 100;

		height: 113rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2.08rpx 8.33rpx rgba(0, 0, 0, 0.01);
	}
</style>